<template>
  <!-- 建立考核模板-基础信息 -->
  <div style="display:flex;flex-direction: column; align-items: center;margin:10px;">
    <el-card class="ensemble" shadow="always">
      <el-row>
        <el-button
          icon="el-icon-arrow-left"
          size="small"
          @click="returns()"
          style="background: #E6E6E6;"
        >返回</el-button>
        <span style="font-weight:800;margin-left:10px;font-size:18px">统计图表</span>
      </el-row>
    </el-card>
    <!-- 基础信息表单部分 -->
    <div class="formContent">
      <el-row>
        <el-card class="chart1">
          <div
            style="display:flex;align-items: center;justify-content: space-between; position: absolute;width:100%"
          >
            <h3>项目经费分布</h3>
            <span>
              <span style="margin-right:20px">单位: 元</span>
              <el-date-picker
                :editable="false"
                :clearable="false"
                style="width:60%;align-items: center;z-index:10000"
                type="year"
                v-model="years"
                value-format="yyyy"
                format="yyyy年"
                @change="changeYear"
                :placeholder="(years)"
              ></el-date-picker>
            </span>
          </div>
          <div id="main1" class="main1"></div>
        </el-card>
      </el-row>
      <div class="bottoms">
        <el-card class="chart2" v-for="item in this.tenChartsList" :key="item.index">
          <div
            style="display:flex;align-items: center;justify-content: space-between; position: absolute;width:100%"
          >
            <h4>{{ item.key }}</h4>
          </div>
          <div id="main2" class="main2"></div>
        </el-card>
      </div>
    </div>
    <!-- v-on:titleChanged="updateTitle" -->
  </div>
</template>
    <script>
import * as echarts from "echarts";
import { getcharts, getzheCharts } from "@/api2/keyan"; //
export default {
  data() {
    return {
      years: "",
      name: "",
      chartsList: [], //转向柱状图列表
      tenChartsList: [] //转向柱状图列表
    };
  },
  mounted() {
    this.getChartsd();
    this.getzheChartsList();
  },
  methods: {
    //选择年份
    async changeYear(e) {
      const params = {
        year: e
      };
      const res = await getcharts(params);
      this.chartsList = res.data;
      this.drawLine();
    },
    async getChartsd() {
      let nowDate = new Date();
      let date = {
        // 获取当前年份
        year: nowDate.getFullYear()
      };
      const params = {
        year: date.year
      };
      this.years = date.year.toString();
      const res = await getcharts(params);
      this.chartsList = res.data;
      this.drawLine();
    },
    // 总echarts部分
    async drawLine() {
      // this.years = date.year;

      let name = [];
      let allList = [];
      let Used = [];
      let residue = [];
      let percentage = [];
      this.chartsList.reverse().forEach(item => {
        name.push(item.name);
        allList.push(item.budgetOutlays);
        Used.push(item.actualOutlay);
        residue.push(item.surplus);
        percentage.push(item.usageRate);
      });
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main1"));
      //   const chart = this.$echarts.init(document.getElementById("main1"));
      // 监听屏幕变化自动缩放图表
      window.addEventListener("resize", function() {
        myChart.resize();
      });
      // 绘制图表
      myChart.setOption({
        color: ["#E2EEFE", "#3B95FF", "#EF7045", "#0071c1"],
        // 设置图表的位置
        grid: {
          x: 40, // 左间距
          y: 60, // 上间距
          x2: 50, // 右间距
          y2: 30, // 下间距
          containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
        },
        // 提示框组件
        tooltip: {
          trigger: "axis", // 触发类型, axis: 坐标轴触发
          axisPointer: {
            // 指示器类型  'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
            // 其实是种简写，表示启用两个正交的轴的 axisPointer。
            type: "none"
          },
          textStyle: {
            color: "#000" // 文字颜色
          },
          // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
          // 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
          formatter: "{b}<br />{a0}: {c0}元<br />{a1}: {c1}元"
        },
        // 图例组件
        legend: {
          x: 1100,
          itemGap: 12,
          tooltip: {
            //在legend里的tooltip，在鼠标滑到图例上时，展示自定义的内容
            show: true
          },
          textStyle: {
            // 文本样式
            fontSize: 16,
            color: "#000"
          },
          top: 20, // 定位
          data: ["总计", "已用", "剩余"] // 图例的数据数组
        },
        // X轴
        xAxis: {
          type: "value", // 坐标轴类型,   'value' 数值轴，适用于连续数据
          // 坐标轴刻度
          axisTick: {
            show: false // 是否显示坐标轴刻度 默认显示
          },
          // 坐标轴轴线
          axisLine: {
            // 是否显示坐标轴轴线 默认显示
            show: false // 是否显示坐标轴轴线 默认显示
          },
          // 坐标轴在图表区域中的分隔线
          splitLine: {
            show: false // 是否显示分隔线。默认数值轴显示
          },
          // 坐标轴刻度标签
          axisLabel: {
            show: false // 是否显示刻度标签 默认显示
          }
        },
        yAxis: [
          // 左侧Y轴
          {
            type: "category", // 坐标轴类型,  'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据
            // 坐标轴刻度
            axisTick: {
              show: false // 是否显示坐标轴刻度 默认显示
            },
            // 坐标轴轴线
            axisLine: {
              // 是否显示坐标轴轴线 默认显示
              show: false, // 是否显示坐标轴轴线 默认显示
              lineStyle: {
                // 坐标轴线线的颜色
                color: "#cdd3ee"
              }
            },
            // 坐标轴在图表区域中的分隔线
            splitLine: {
              show: false // 是否显示分隔线。默认数值轴显示
            },
            // 坐标轴刻度标签
            axisLabel: {
              show: true, // 是否显示刻度标签 默认显示
              fontSize: 16, // 文字的字体大小
              color: "#000", // 刻度标签文字的颜色
              // 使用字符串模板，模板变量为刻度默认标签 {value}
              formatter: "{value}"
            },
            data: name // 类目数据，在类目轴（type: 'category'）中有效
          },
          // 右侧Y轴
          {
            type: "category", // 坐标轴类型
            // 坐标轴轴线
            axisLine: {
              show: false
            },
            // 坐标轴刻度
            axisTick: {
              show: false
            },
            // 坐标轴刻度标签
            axisLabel: {
              show: true, // 是否显示刻度标签 默认显示
              fontSize: 16, // 文字的字体大小
              color: "#000", // 刻度标签文字的颜色
              // 使用字符串模板，模板变量为刻度默认标签 {value}
              formatter: "使用率: {value}%"
            },
            data: percentage
          }
        ],
        // 系列列表
        series: [
          {
            type: "bar",
            name: "总计", // 系列类型
            // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
            barMaxWidth: 20, // 柱条的最大宽度，不设时自适应
            // 图形上的文本标签
            label: {
              color: "#3B95FF",
              show: true,
              // 标签的位置 left right bottom top inside，绝对的像素值 position: [10, 10]，相对的百分比 position: ['50%', '50%']
              position: "inside",
              formatter: function(params) {
                //柱条上的文字
                // return params.data + "%";
                return params.data == 0 ? "" : params.data;
              }
            },
            data: allList // 系列中的数据内容数组
          },
          {
            type: "bar", // 系列类型
            name: "已用", // 系列名称, 用于tooltip的显示, legend 的图例筛选
            // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
            stack: "金额",
            barMaxWidth: 20, // 柱条的最大宽度，不设时自适应
            // 图形上的文本标签
            label: {
              color: "#fff",
              show: true,
              // 标签的位置 left right bottom top inside，绝对的像素值 position: [10, 10]，相对的百分比 position: ['50%', '50%']
              position: "inside",
              formatter: function(params) {
                //柱条上的文字
                // return params.data + "%";
                return params.data == 0 ? "" : params.data;
              }
            },
            data: Used // 系列中的数据内容数组
          },
          {
            type: "bar", // 系列类型
            name: "剩余", // 系列名称, 用于tooltip的显示, legend 的图例筛选
            // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
            stack: "金额",
            barMaxWidth: 20, // 柱条的最大宽度，不设时自适应
            // 图形上的文本标签
            label: {
              color: "#fff",
              show: true,
              // 标签的位置 left right bottom top inside，绝对的像素值 position: [10, 10]，相对的百分比 position: ['50%', '50%']
              position: "inside",
              formatter: function(params) {
                //柱条上的文字
                // return params.data + "%";
                return params.data == 0 ? "" : params.data;
              }
            },
            data: residue // 系列中的数据内容数组
          }
        ]
      });
    },
    //近十年数据echarts部分
    async getzheChartsList() {
      const res = await getzheCharts();
      this.tenChartsList = res.data;
      if (this.tenChartsList.length !== "") {
        this.$nextTick(() => {
          this.drawLineTen(this.tenChartsList);
        });
      }
    },
    drawLineTen(e) {
      let myChartten = document.getElementsByClassName("main2");
      for (var i = 0; i < e.length; i++) {
        let year = [];
        let actualOutlay = [];
        let surplus = [];
        let usageRate = [];
        e[i].value.forEach(item => {
          year.push(item.year);
          actualOutlay.push(item.actualOutlay);
          surplus.push(item.surplus);
          usageRate.push(item.usageRate);
        });
        var myCharts = echarts.init(myChartten[i]);
        window.addEventListener("resize", function() {
          myCharts.resize();
        });

        myCharts.setOption({
          color: ["#79CFA1", "#F7A082", "#6C74F6"],
          legend: {
            // x: 500,
            show: true,
            formatter: function(name) {
              const list = {
                test_1: "使用",
                test_4: "未使用",
                music: "使用率"
              };
              return list[name];
            }
          },
          xAxis: [
            {
              type: "category",
              data: year,
              axisTick: {
                // 轴刻度
                show: false
              },
              axisLabel: {
                // 轴文字
                interval: 0, //代表显示所有x轴标签显示
                color: "#000",
                fontSize: 16
              },
              axisLine: {
                // 轴线
                show: true
              }
            }
          ],
          yAxis: [
            {
              type: "value",
              position: "left",
              axisLine: {
                // 轴线
                show: true
              },
              splitLine: {
                // 网格线
                show: true,
                lineStyle: {
                  //分割线
                  color: "#ccc",
                  width: 1,
                  type: "solid" //dotted：虚线 solid:实线
                }
              }
            },
            {
              splitLine: {
                // 网格线
                show: true,
                lineStyle: {
                  //分割线
                  color: "#ccc",
                  width: 1,
                  type: "dotted" //dotted：虚线 solid:实线
                }
              },
              type: "value",
              position: "right",
              axisLine: {
                // 轴线
                show: true
                // lineStyle: {
                //   color: "#d9e1e4"
                // }
              },
              max: 100, //最大值
              min: 0, //最小值
              interval: 20, //间隔
              axisLabel: {
                color: "#4e5b5f",
                formatter: function(val) {
                  //百分比显示
                  return val + "%";
                }
              }
            }
          ],
          series: [
            {
              name: "test_1",
              data: actualOutlay,
              type: "bar",
              barWidth: 22, // 柱子宽度
              distance: 15, // 距离
              stack: "Mon",
              itemStyle: {
                normal: {
                  label: {
                    show: true, //开启显示数值
                    position: "center", //数值在上方显示
                    textStyle: {
                      //数值样式
                      color: "#333333", //字体颜色
                      fontSize: 10 //字体大小
                    },
                    formatter: function(params) {
                      //柱条上的文字
                      // return params.data + "%";
                      return params.data == 0 ? "" : params.data;
                    }
                  }
                }
              },
              backgroundStyle: {
                color: "#F7A082"
              }
            },
            {
              name: "test_4",
              data: surplus,
              type: "bar",
              barWidth: 12, // 柱子宽度
              distance: 15, // 距离
              stack: "Mon",
              itemStyle: {
                normal: {
                  label: {
                    show: true, //开启显示数值
                    position: "top", //数值在上方显示
                    textStyle: {
                      //数值样式
                      color: "#333333 ", //字体颜色
                      fontSize: 10 //字体大小
                    },
                    formatter: function(params) {
                      //柱条上的文字
                      // return params.data + "%";
                      return params.data == 0 ? "" : params.data;
                    }
                  }
                }
              },
              backgroundStyle: {
                color: "#F7A082"
              }
            },
            {
              name: "music",
              type: "line",
              lineStyle: {
                // 设置线条的style等
                normal: {
                  color: "#6C74F6" // 折线线条颜色
                }
              },
              yAxisIndex: 1,
              data: usageRate
            }
          ]
        });
      }
    },
    returns() {
      this.$emit("fatherMethod1", false);
    }
  }
};
</script>
    
    <style lang="scss" scoped>
.ensemble {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  width: 100%;
  .ensemble1 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.formContent {
  width: 100%;
  .chart1 {
    position: relative;
    height: 400px;
  }
  .bottoms {
    width: 100%;
    height: auto;
    // background-color: lightcoral;
    display: flex; //把盒子在一行显示
    overflow-x: hidden; //超出隐藏
    flex-wrap: wrap; //超出自动换行
    .chart2 {
      width: 49.2%;
      height: 360px;
      // background-color: lightseagreen;
      margin: 10px 5px 10px 5px;
    }
    margin-top: 20px;
  }
}
.main1 {
  width: 90%;
  height: 360px;

  //   background-color: pink;
}
.main2 {
  width: 100%;
  height: 320px;
  //   background-color: pink;
}
.main3 {
  width: 100%;
  height: 320px;
  //   background-color: pink;
}
::v-deep .el-input__icon {
  line-height: 33px;
}
</style>